<div class="underlying" style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;">
  <div class="table">
    <!-- 头部Table -->
    <nz-table #nestedTable style="border-collapse:collapse;border-radius:4px 4px 0px 0px;"
      [nzScroll]="{x:'2190px',y:'750px'}" [nzData]=" tempData" class="designTable" [nzShowPagination]='false'>
      <thead class="tableHeard" style="text-align: center !important;">
        <tr style="text-align: center !important;">
          <th nzWidth="60px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="250px">工聯單號</th>
          <th nzWidth="230px">19碼</th>
          <th nzWidth="150px">数量</th>
          <th nzWidth="150px">二次加工期限</th>
          <th nzWidth="200px">二次加工備註</th>
          <th nzWidth="80px" nzCustomFilter>箱號
            <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
              [nzDropdownMenu]="menu" nzTrigger="click" nzPlacement="bottom" [nzClickHide]="false" nzTableFilter></i>
          </th>
          <th nzWidth="200px">退單備註</th>
          <th nzWidth="220px">工作時間統計</th>
          <th nzWidth="150px">預計時間</th>
          <th nzWidth="150px">實際時間</th>
          <th>治具交期</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <ng-container *ngFor="let item of tempData let bigkey = index">
          <tr id="first">
            <td style="min-width:60px;">
              <a *ngIf="item.tip == 1" class="new"></a>
              <a *ngIf="item.tip == 2" class="warning"></a>
            </td>
            <td style="min-width:50px;">
              <a class="attich" (click)="downLoad(item)"></a>
            </td>
            <td style="min-width:50px;">
            </td>
            <td style="min-width:50px;">
            </td>
            <td nzShowExpand [(nzExpand)]="item.expand" style="color: rgba(48,73,77,1);min-width:50px;"
              (nzExpandChange)="QueryWorkOrder(bigkey,item)">
            </td>
            <td class="fontColor" style="min-width:250px;text-align: left; cursor: pointer;"
              title="{{item.union_order}}">
              {{item.union_order}}
            </td>
            <!-- 19码悬浮框 -->
            <td *ngIf="item.code19.split(',')[1]"
              style="min-width: 230px !important;text-align: left;text-indent: 10px;"
              title={{item.code19.split(splitJudge)[0]}}~{{item.code19.split(splitJudge)[1]}}>
              {{item.code19.split(",")[0]}}
            </td>
            <td *ngIf="!item.code19.split(',')[1]" style="min-width:230px;text-align: left;text-indent: 10px;">
              {{item.code19.split(",")[0]}}
            </td>
            <td style="min-width:150px;">{{item.quatity}}</td>
            <td style="min-width:150px;"></td>

            <td style="min-width:200px;">
            </td>
            <td style="min-width:80px;"></td>

            <td style="min-width:200px;text-align: left;"><span
                style="text-overflow: -o-ellipsis-lastline;
              overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical; cursor: pointer;width: 190px;"
                title={{item.other_remark}}>{{item.other_remark}}</span></td>
            <!--  -->
            <td style="min-width:220px;">{{item.time}}</td>
            <!-- 預計時間 {{item.machine_time_2}}-->
            <td style="min-width:150px;"></td>
            <!-- 實際時間 -->
            <td style="min-width:150px;">{{item.ercijiagong_shijian =='' || 0 ? '' : item.ercijiagong_shijian +'小時'}}
            </td>
            <!--  -->
            <!--  -->
            <td style="min-width:150px;">{{item.delivery_date}}</td>

          </tr>
          <tr [(nzExpand)]="item.expand">
            <td colspan="16" style="padding-left:0 !important;">
              <!-- 展开治具Table -->
              <nz-table #innerTable [nzData]="workData[bigkey]" nzSize="middle" [nzShowPagination]="false"
                *ngFor="let item2 of workData[bigkey] let key = index">
      <tbody class="downData" style="width: 100%;text-align: center !important;">
        <tr id="second" style="text-align: center !important;">
          <td style="min-width:60px;" *ngIf="item2.machine_end_date_2 == ''">
            <a class="new"></a>
          </td>
          <td style="min-width:60px;" *ngIf="item2.machine_end_date_2 != ''">
            <a *ngIf="item2.remark != ''" class="warning"></a>
          </td>
          <!-- 附件 -->
          <td style="min-width:50px;">
            <a class="attich2" (click)="downLoad2(item2)" title="文件信息"></a>
          </td>
          <!-- 退回 -->
          <td style="min-width:50px;text-align: center">
            <a *ngIf="item2.chaidan != 1" class="return" (click)="return(item2,bigkey,key)" title="退回"></a>
          </td>
          <!-- 送出 -->
          <td style="min-width:50px;">
            <a *ngIf="item2.chaidan != 1" class="send" (click)="send(item2,bigkey,key,item)" title="送出"></a>
          </td>

          <td *ngIf="item2.chaidan == 1 " nzShowExpand [(nzExpand)]="item2.expand"
            style="color: rgba(48,73,77,1);width:50px;" (nzExpandChange)="QueryWorkOrder2(item2,bigkey,key)"></td>
          <td *ngIf="item2.chaidan != 1 " style="color: rgba(48,73,77,1) ; width: 50px;"></td>

          <td style="min-width:250px;text-align: left" title="{{item2.sheet_order}}">
            <span
              style="text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;
                       -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left; cursor: pointer; width: 240px;">
              {{item2.sheet_order}}</span>
          </td>
          <td style="min-width:230px;text-align: center"></td>
          <!--數量 -->
          <td style="min-width:150px;text-align: center;">{{item2.quatity_total}}</td>
          <!-- 材質  改为期限-->
          <td style="min-width:150px;text-align: center">
            {{item2.machine_end_date_2 === 'null' ? '' : item2.machine_end_date_2}}</td>
          <!-- 圖檔尺寸  改为二次加工备注-->
          <td *ngIf="!item2.machine_remark_2 || item2.machine_remark_2 === '' "
            style="text-align: center; min-width: 200px;">
            <a class="addRemark" (click)="addRemark(item2)"></a>
          </td>
          <td *ngIf="item2.machine_remark_2 != ''" style="min-width: 200px;">
            <span
              style="text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;text-decoration: underline;
                     -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left; cursor: pointer; width: 190px;text-align: left;"
              class="fontColor" (click)="addRemark(item2)" title={{item2.machine_remark_2}}>
              {{item2.machine_remark_2}}</span>

          </td>
          <!-- 箱号 -->
          <td style="min-width:80px;">
            {{ item2.box ==='' ? '' : item2.box +'號' }}
          </td>
          <!-- 退单备注 -->
          <td style="min-width:200px;text-align: left;"><span
              style="text-overflow: -o-ellipsis-lastline;
                    overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical; cursor: pointer;width: 200px;"
              title={{item2.remark}}>{{item2.remark}}</span></td>

          <!-- 计时器 -->
          <td style="min-width:220px;align-items: center;" (click)="clickLine(bigkey,key,item2.timestamp)">
            <div *ngIf="sfmtime[bigkey][key].zs">
              <span class="start" (click)="start(bigkey,key,item2)"></span>
              <i>{{sfmtime[bigkey][key].sj}}</i>
              <span class="end" (click)="end(item2,bigkey,key)"></span>
            </div>
          </td>
          <!-- 预计时间 -->
          <td style="min-width:150px;text-align: center">
            {{item2.machine_time_2 === null ? '' : (item2.machine_time_2 === '' ? '' : item2.machine_time_2 + '小時') }}
          </td>
          <!-- 实际时间 -->
          <td style="min-width:150px"></td>
          <td style="min-width:150px;text-align: center"></td>
        </tr>
        <tr [(nzExpand)]="item2.expand" *ngFor="let item3 of listfd[bigkey][key]">
          <td style="background:#000;min-width:60px;"></td>
          <td style="background:#000;min-width:50px;"></td>
          <td style="background:#000;min-width:50px;text-align: center">
            <a class="return" (click)="return(item3,bigkey,key)" title="退回"></a>
          </td>
          <td style="background:#000;min-width:50px;">
            <a class="send" (click)="send(item3,bigkey,key,item)" title="送出"></a>
          </td>
          <td style="color: rgba(48,73,77,1);background:#000;min-width:50px;"></td>
          <td style="background:#000;min-width:250px;text-align: left" title="{{item3.sheet_order}} ">
            <span
              style="text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;
                       -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left; cursor: pointer; width: 240px;">
              {{item3.sheet_order}}</span>
          </td>
          <td style="background:#000;min-width:230px;text-align: center"></td>
          <td style="background:#000;min-width:150px;text-align: center;">{{item3.gjsl}}</td>
          <td style="background:#000;min-width:150px;text-align: center"></td>
          <td style="text-align: center;background:#000;min-width: 200px;">
            <!-- <a class="addRemark" (click)="addRemark(item3)"></a> -->
          </td>
          <!-- <td *ngIf="item3.machine_remark_2 != ''" style="background: #000;min-width: 200px;">
            <span
              style="text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;text-decoration: underline;
                       -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;text-align: left; cursor: pointer; width: 190px;text-align: left;background:#000;"
              class="fontColor" (click)="addRemark(item3)" title={{item3.machine_remark_2}}>
              {{item3.machine_remark_2}}
            </span>
          </td> -->
          <td style="background:#000;min-width:80px;">
            {{ item3.box ==='' ? '' : item3.box +'號' }}
          </td>
          <!-- 退单备注 -->
          <td style="min-width:200px;text-align: left;background:#000;"><span
              style="text-overflow: -o-ellipsis-lastline;
                    overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical; cursor: pointer;width: 190px;"
              title={{item3.remark}}>{{item3.remark}}</span></td>
          <!-- 计时器 -->
          <td style="min-width:220px;background:#000;">
          </td>
          <!-- 预计时间 -->
          <td style="background:#000;min-width:150px;text-align: center">
          </td>
          <!-- 实际时间 -->
          <td style="background:#000;min-width:150px"></td>
          <td style="background:#000;min-width:150px;text-align: center"></td>
        </tr>
      </tbody>
    </nz-table>
    </td>
    </tr>
    </ng-container>
    </tbody>
    </nz-table>
    <!-- 箱号搜索 -->
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <div class="search-box" style="background:#487377; margin-top: -18px;">
        <input type="text" nz-input placeholder="come on 箱号" [(ngModel)]="searchValue" />
        <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
          Search
        </button>
        <button nz-button nzSize="small" (click)="reset()" class="search-button">Reset</button>
      </div>
    </nz-dropdown-menu>

    <!-- 添加编程备注 -->
    <nz-modal class="designRemark" [(nzVisible)]="addRemark1" nzTitle="二次加工備註" (nzOnCancel)="CancelAddRemark()"
      [nzOkLoading]="isOkLoadingRemark" style="text-align:left" [nzFooter]="nzFooter"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'left',lineHeight:'20px'}">
      <div class="li" *ngFor="let item3 of dlyy let key3 = index" style="display: inline-block;">
        <label nz-checkbox [(ngModel)]="item3.show" (ngModelChange)="bzclick(item3.name)"><span
            style="cursor:pointer; color: #fff;">{{item3.name}}</span></label>
      </div>
      <ng-template #nzFooter>
        <button nz-button [nzType]="'primary'" (click)="addRemarkAdd()">添加</button>
        <button nz-button [nzType]="'primary'" (click)="addRemarkDelete()">删除</button>1
        <button nz-button [nzType]="'primary'" (click)="CancelAddRemark()">取消</button>
        <button nz-button [nzType]="'primary'" (click)="addRemarkOk()">确定</button>

      </ng-template>
    </nz-modal>
    <nz-modal class="designRemark" [(nzVisible)]="addDlyy" [nzTitle]="nzTitle1" [nzContent]="nzContent1"
      [nzFooter]="nzFooter1" (nzOnCancel)="addRemarkAddCancel()" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <ng-template #nzTitle1>添加備註</ng-template>
      <ng-template #nzContent1>
        <div class="input_first">
          <div class="titlew">備注名：</div>
          <input type="text" [(ngModel)]='dlyyadd'>
        </div>
        <!-- <p>+ Add</p> -->
      </ng-template>
      <ng-template #nzFooter1>
        <button nz-button [nzType]="'primary'" (click)="addRemarkAddCancel()">取消</button>
        <button nz-button [nzType]="'primary'" (click)="addRemarkAddOk()">确定</button>

      </ng-template>
    </nz-modal>
    <!-- 上传文件 -->
    <nz-modal [(nzVisible)]="fileInfom" nzTitle="文件信息" (nzOnCancel)="CancelShow()" (nzOnOk)="ShowOK()"
      [nzOkLoading]="isOkLoadingfileInfom" style="text-align:center" nzWidth='1000px'
      [nzBodyStyle]="{height:'600px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'18px',textAlign:'center',lineHeight:'20px'}">
      <!-- 加载中 -->
      <nz-spin [nzSize]="'large'" *ngIf="isLoading"
        style="position: absolute;width: 100vw;height: 100vh;margin-left: -25.5vw;margin-top: -16vh;">
      </nz-spin>
      <div style="text-align:left;border-bottom: 1px solid rgba(36,54,58,1);background: #30494d;">
        <div style="width:100% !important;height:1px;background: rgba(36,54,58,1);"></div>
        <input type="file" nv-file-select uploader="uploader"
          style="color:#ffffff; position: absolute;margin-left: 50px; ;margin-top: 16px;" value="点击上传文件" multiple
          (change)="openFile($event)">
        <a class="upload" (click)="Upload()"></a>
      </div>
      <div style="text-align:left;line-height: 45px;">
        <nz-table class="tb_file" #rowSelectionTable [nzShowPagination]="false" nzShowSizeChanger [nzData]="listOfData"
          (nzCurrentPageDataChange)="currentPageDataChange($event)" style="height: 540px;overflow: auto;">
          <thead>
            <tr style="height:20px;">
              <th style="min-width:250px;text-align:center">文件名稱</th>
              <th style="min-width:250px;text-align:center">上傳時間</th>
              <th style="min-width:100px;text-align:center">文件狀態</th>
              <th style="min-width:250px;text-align:center">備註</th>
              <th style="min-width:50px;text-align:center"></th>
            </tr>
          </thead>
          <tbody class="uploadTable">
            <tr *ngFor="let data of listOfData" class="list_hover" style="text-align: center !important;">
              <td style="width:250px;text-align:center;">
                <a [href]="link" [download]="data.file_name" (click)="downLoadFile(data)">
                  {{data.file_name}}
                </a>
              </td>
              <td style="width:250px;text-align:center">{{data.upload_time}}</td>
              <!-- 审核状态 -->
              <td style="width:100px;text-align:center" *ngIf="data.file_status === 0" ngDefaultControl>
                未审核
              </td>
              <td style="width:100px;text-align:center" *ngIf="data.file_status === 1" ngDefaultControl>
                已審核
              </td>
              <td style="width:100px;text-align:center" *ngIf="data.file_status === 2" ngDefaultControl>
                已退回
              </td>

              <td style="width:250px;text-align:center">{{data.remark}}</td>

              <td style="width:50px;text-align:center">
                <a class="delFile" (click)="showDelFile(data)"></a>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </nz-modal>

    <!-- 删除文件信息 -->
    <nz-modal [(nzVisible)]="isFileVisible" nzTitle="刪除" (nzOnCancel)="handleFileCancel()" (nzOnOk)="delFileOk()"
      [nzOkLoading]="isFileOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確認刪除這個文件信息嗎？</p>
    </nz-modal>

    <!-- 文件退回 -->
    <nz-modal class="remark" [(nzVisible)]="addOtherRemark" nzTitle="退回" (nzOnCancel)="CancelRemark()"
      (nzOnOk)="RemarkOk()" [nzOkLoading]="isOkLoadingOthRemark" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'350px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div style="margin-top:0px">
        <textarea nz-input [(ngModel)]="RemarkValue" [nzAutosize]="{ minRows: 2, maxRows: 8 }"
          class="deRemark"></textarea>
      </div>
    </nz-modal>


    <nz-modal [(nzVisible)]="fileInfom2" nzTitle="文件信息" (nzOnCancel)="CancelShow2()" (nzOnOk)="ShowOK2()"
      [nzOkLoading]="isOkLoadingfileInfom" style="text-align:center" nzWidth='1000px'
      [nzBodyStyle]="{height:'600px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'18px',textAlign:'center',lineHeight:'20px'}">
      <ul>
        <li *ngFor="let item of imglist" style="height: 20px;padding: 10px;"> <a [href]=link+item
            [download]=item>{{item}}
          </a></li>
      </ul>
    </nz-modal>

    <!-- 送出 -->
    <nz-modal [(nzVisible)]="isSendVisible" nzTitle="送出" (nzOnCancel)="handleSendCancel()" (nzOnOk)="sendOk()"
      [nzOkLoading]="isSendOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確認送出這個工件嗎？</p>
    </nz-modal>
     <!-- 送出 -->
     <nz-modal [(nzVisible)]="isSendVisible2" nzTitle="By pass工單退單" (nzOnCancel)="handleSendCancel2()" (nzOnOk)="sendOk2()"
     [nzOkLoading]="isSendOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
     [nzBodyStyle]="{height:'300px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
     <p>此操作會將該工單下所用工件退回編程！</p>
   </nz-modal>
  </div>
</div>